<!-- 
  回顾前面讲的知识点：
    1）响应式  监听数据变化  get set
    2）模板编译  生成render函数   执行render函数返回vnode
    3）vdom根据vnode渲染真实DOM 或更新真实DOM  走patch和diff

  说一下vue初次渲染过程？
    第一步：解析模板为render函数
    第二步：触发响应式，监听data中的属性，getter和setter
    第三步：执行render函数，生成vnode， 进而进行patch(elem,vnode)
      A）这一步会触发data getter，在getter中进行依赖收集（把数据“观察”起来）。
        注意：不一定是所有的数据都会被观察。是否被观察取决于模板中是否使用。
    第四步：把vnode转化成真实DOM，渲染到页面上。

  说一下数据更新过程？
    第一步：修改数据，会触发data setter
    第二步：重新执行render函数，生成新的vnode（newVnode）
    第三步：进行patch(vnode,newVnode),patch的过程就是diff的过程

  对于上面的流程，vue官方有一人图，如下：
    https://v2.cn.vuejs.org/v2/guide/reactivity.html

  异步渲染：
    进行patch(vnode,newVnode),patch的过程就是diff的过程。找到差异，更新差异，这个渲染是
    异步。为什么是异步的？
    答：汇总data的数据变化，一次性渲染，尽量少的减少渲染次数，提高性能。


  一个组件渲染到页面上，修改data触发更新。它背后的原理是什么？
  就是上面讲的三大核心。

  响应式：监听data的属性 getter setter  数组的7大方法
  模板编译：编译成render函数,再到vnode
  vdom: patch(elem,vnode)  patch(vnode,newVnode)

  初次渲染
  更新过程
  异步渲染

  渲染和响应式有什么关系？
  渲染和模板编译有什么关系？
  渲染和vdom有什么关系？
 -->

 <p>{{msg}}</p>

 <script>
   export default{
     data() {
       return {
         msg:"hello", // 会触发getter，在getter中需要把数据观察起来
         city:"bj"  // 不会触发getter，因为模板中没有使用
       }
     },
   }
 </script>